<template>
  <div class="deliveryConfirmat">
    <!-- 顶部地址 -->
    <div class="address">
      <div class="top fz14">
        <div class="location">
          <img src="../../assets/address copy备份 2@2x.png" />
        </div>
        <div class="name">叶先生</div>
        <div class="tel">187****5678</div>
      </div>
      <div class="bottom fz12">
        上海市浦东新区森兰美伦A栋
      </div>
    </div>
    <!-- 提货商品 -->
    <div class="product">
      <div class="top">
        <img src="@/assets/店铺@2x.png" />
        <span class="text fz14">花栩初</span>
      </div>
      <cloudProductItem
        v-for="(item, index) in productItem"
        :key="index"
        :productItem="item"
      ></cloudProductItem>
      <!-- 底部计算价格 -->
      <div class="press"></div>
    </div>
    <!-- 配送方式 -->
    <!-- 货款余额 -->
    <!-- 底部 -->
    <div class="bottom">
      <cloud-bottom>
        <template v-slot:left>
          <span>￥<span class="price fz24">9315.00</span></span>
        </template>
        <template v-slot:right>
          <span @click="$router.push('/deliveryConfirmat')">立即提货</span>
        </template>
      </cloud-bottom>
    </div>
  </div>
</template>

<script>
import cloudBottom from '@/components/cloudBottom'
import cloudProductItem from './components/cloudProductItem'

export default {
  components: { cloudBottom, cloudProductItem },
  data() {
    return {
      productItem: [
        {
          name: '私密产品私密产品私密产品私密产品私密产品私密产…',
          price: '342.00'
          //   src: '../../assets/矩形 2.png',
        },
        {
          name: '私密产品私密产品私密产品私密产品私密产品私密产…',
          price: '342.00'
        },
        {
          name: '私密产品私密产品私密产品私密产品私密产品私密产…',
          price: '342.00'
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.deliveryConfirmat {
  background: #f7f6fb;
  padding: 12px;
  //   顶部地址
  .address {
    margin-bottom: 12px;
    width: 351px;
    height: 76px;
    background: #ffffff;
    border-radius: 8px;
    padding: 16px 12px;
    .top {
      display: flex;
      font-weight: 600;
      .location {
        width: 18px;
        height: 18px;
        img {
          width: 100%;
          height: 18px;
        }
      }
      .name {
        margin: 0 16px 0 6px;
      }
    }
    .bottom {
      margin: 10px 24px;
    }
  }
  //   商品列表
  .product {
    width: 351px;
    height: 426px;
    background: #fff;
    border-radius: 9px;
    padding: 12px;
    .top {
      width: 100%;
      height: 36px;
      line-height: 36px;
      //   background-color: #ff3040;
      span {
        vertical-align: middle;
        margin-left: 1px;

        font-weight: 500;
      }
      img {
        width: 18px;
        height: 18px;
      }
    }
    // 底部总价
    // .press {
    // }
  }
  //   底部样式覆盖
  .bottom {
    ::v-deep {
      .left {
        font-size: 12px;
        font-weight: 600;
        color: #ff6400;
      }
      .right {
        background: #afabb7;
      }
    }
  }
}
</style>
